<template>
  <el-scrollbar class="main-scroll">
    <div class="banner callus">
      <img :src="requireImg('call-banner.png')" />
    </div>
    <breadcrumb></breadcrumb>
    <div class="container-x-suit">
      <div class="Wrapper">
        <div class="mailer">
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg" preserveAspectRatio="none" viewBox="0 0 100 100">
            <defs>
              <filter id="f1" x="0" y="0" width="200%" height="200%">
                <feOffset result="offOut" in="SourceAlpha" dx="0" dy="-10" />
                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
                <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
              </filter>
            </defs>
            <polygon points="0,0 0,10 50,90 100,10 100,0" style="fill: #eeeef1" filter="url(#f1)"/>
          </svg>
          <div class="content-p">
            <div class="content">
              <div class="top">
                <i class="icon-call"></i>
                <p class="title">虎匠总部电话</p>
                <p class="call">0755-21017743</p>
              </div>
              <div class="bottom">
                <i class="icon-email"></i>
                <p class="title">虎匠总部邮箱</p>
                <p class="call">hujiang@hj-tec.com</p>
                <div class="attention">
                  <p>欢迎广大客户、业主通过该邮箱向虎匠公司咨询或反映任何问题；我们衷心感谢您的支持！</p>
                  <p>1、 您与我司往来的邮件不作为我司与您之间合作或我司向您发出要约邀请之凭据。</p>
                  <p>2、 您向我司发送邮件纯属您个人行为，且发送邮件的内容仅代表您的观点和意愿，并不代表我司立场。</p>
                  <p>3、 我司回复的邮件及内容不作为虎匠公司对您的任何承诺，仅作为服务体现。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <m-footer></m-footer>
  </el-scrollbar>
</template>

<script>
import Breadcrumb from '@/base/breadcrumb/breadcrumb'
import MFooter from '@/components/footer/footer'
import { requireImgMixin } from '@/common/js/mixin'
export default {
  name: 'CallUS',
  mixins: [requireImgMixin],
  methods: {
  },
  components: {
    Breadcrumb,
    MFooter
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'

.banner
  &.callus
    width:100%
    height: 477px
    background-color: $color-info
    img
      height: 100%
      position: relative
      left: 50%
      transform: translateX(-50%)

.Wrapper
  padding: 92px 20px 82px
  height: 560px
  .mailer
    position: relative
    width: 100%
    height: 100%
    background-color: $color-theme
    box-shadow: 4px 5px 10px rgba(0,0,0,0.3)
    .svg
      position:absolute
      width: 100%
      height: 250px
    .content-p
      position: relative
      height: 100%
      top: 0
      left: 0
      right: 0
      bottom: 0
      padding: 55px 0
      box-sizing: border-box
    .content
      position: relative
      height: 100%
      &>.top
        text-align: center
        margin-bottom: 90px
        i
          font-size: 60px
        p
          font-size: 14px
          height: 20px
          line-height: 20px
          &.call
            font-size: 16px
        .title
          padding-top: 10px
      &>.bottom
        text-align: center
        width: 100%
        color: #FFF
        i
          color: #FFF
          font-size: 60px
        p
          font-size: 14px
          line-height: 20px
          &.call
            font-size: 16px
        .title
          padding-top: 10px
        .attention
          display: inline-block
          text-align: left
          p
            font-size: 12px
            &:first-child
              line-height: 20px
              padding: 20px 0 10px 0

@media (max-width: $media-smail)
  .content-p
    padding: 55px 0 0 0 !important
  .attention
    p
      padding: 0 10px !important
      &:first-child
        padding: 20px 10px 10px 10px !important
  .mailer
    padding: 10px !important
    box-sizing: border-box !important
    border-radius: 10px !important
    .svg
      display: none
    .content
      color: #FFF !important
      &>.top
        margin-bottom: 45px !important
      i
        color: #FFF !important

</style>
